<template>
  <div class="item">
    <div
      class="color"
      v-if="item.color"
      :style="{ background: item.color }"
    ></div>
    {{ item.name }}
  </div>
</template>

<script lang="ts">
/**
 * 客户标签显示组件
 * @prop item 对象格式
 * {
 *  name: '',
 *  color: ''
 * }
 */
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  name: 'Item'
})
export default class Item extends Vue {
  @Prop() private item
}
</script>

<style lang="stylus" scoped>
.item
  height 30px
  line-height 30px
  color #686e84
  display flex
  align-items center
  .color
    flex 0 0 10px
    width 10px
    height 10px
    border-radius 50%
    margin-right 8px
</style>
